<!--
 * @Description: FormItem 每一项表单元素
 * @Version: 0.1
 * @Autor: Civet
 * @Date: 2019-11-01 14:30:58
 * @LastEditors: Civet
 * @LastEditTime: 2019-11-07 15:31:02
 -->
<template>
  <el-form-item :rules="item.rules" :label="item.label" :prop="item.key">
    <el-input
      v-if="item.type ==='input'"
      v-model="item.value"
      v-bind="$attrs"
      v-on="$listeners"
      :type="item.subtype"
      :placeholder="item.placeholder"
      :disabled="item.disable"
      :readonly="item.readonly"
      :clearable="true"
    ></el-input>

    <el-select
      v-else-if="item.type ==='select'"
      v-model="item.value"
      v-bind="$attrs"
      v-on="$listeners"
      :multiple="item.multiple"
      :disabled="item.disabled"
      :multiple-limit="item.multipleLimit"
      :clearable="true"
    >
      <el-option
        v-for="oItem in item.options.length ? item.options : ajaxOptions"
        :key="oItem.value"
        :label="oItem.label"
        :value="oItem.value"
        :disabled="oItem.disabled"
      ></el-option>
    </el-select>

    <treeselect
      v-else-if="item.type ==='tree'"
      v-model="item.value"
      v-bind="$attrs"
      v-on="$listeners"
      :normalizer="_normalizer"
      :default-expand-level="1"
      :options="item.options.length ? item.options : ajaxOptions"
      :placeholder="item.placeholder"
      noOptionsText="暂无数据"
      noResultsText="没有找到匹配结果"
      noChildrenText="没有子节点"
      :multiple="item.multiple"
      :flat="item.multiple ? true : false"
    />
  </el-form-item>
</template>
0
<script>
import Treeselect from "@riophae/vue-treeselect";
import "@riophae/vue-treeselect/dist/vue-treeselect.css";
import dynamicFormApi from "@/httpUtils/DynamicForm/apiDynamicForm";

export default {
  components: {
    Treeselect
  },
  name: "baseDynamicForm",
  watch: {
    item: {}
  },
  props: {
    // formLsit传进来的每一项
    // 联动对象
    formItemList: {
      type: Array
    },
    item: {
      type: Object,
      required: true
    },
    relationObj: {
      type: Object
    }
  },
  filters: {},
  data() {
    return {
      ajaxOptions: [] // 下拉选项
    };
  },
  created() {
    // 异步获取下拉选项
    const { optionsUrl, key, type, next, value, prev } = this.item;
    if (optionsUrl) {
      // 根据项目自行修改;
      let obj = null;
      if (prev !== "") {
        obj = {};
        this.formItemList.forEach(item => {
          if (item.key === prev) {
            obj[item.key] = item.value;
          }
        });
      }

      // 有毒的东西不知道为什么就是取不到，方法又没错
      // let obj = null;
      // if (prev !== "") {
      //   obj = {};
      //   let relationObj = this.relationObj;
      //   console.log("prev", prev);
      //   console.log("relationObj", relationObj);
      //   console.log("relationObj[prev]", relationObj.get(prev));
      //   let { key, value } = relationObj[prev];
      //   obj[item.key] = item.value;
      // }

      dynamicFormApi
        .getDynamicForm(optionsUrl, obj)
        .then(res => {
          this.ajaxOptions = res.data;
        })
        .catch(err => {
          this.$message.error(err.message);
        });
    }
  },
  mounted() {},
  updated() {},
  methods: {
    /**
     * @description: 树配置
     * @param {object} node 树节点
     * @return:
     * @author: Civet
     */
    _normalizer(node) {
      return {
        id: node.id,
        label: node.label,
        children: node.children
      };
    }
  },
  destroyed() {}
};
</script>

<style scoped lang="less">
</style>
